<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .content {
            position: relative;
            width: 1000px;
            height: 3000px;
            background-color: pink;
            margin: 0 auto;
        }

        .backtop {
            display: none;
            width: 50px;
            left: 50%;
            margin: 0 0 0 505px;
            position: fixed;
            bottom: 60px;
            z-index: 100;
        }

        .backtop a {
            height: 50px;
            width: 50px;
            background: url(./images/bg2.png) 0 -600px no-repeat;
            opacity: 0.35;
            overflow: hidden;
            display: block;
            text-indent: -999em;
            cursor: pointer;
        }
        /* .xxm{
            display: block;
            top: -80px;
            height: 80px;
            background-color: seashell;
        }
        .LLL{
            position: absolute;
            top: 500px;
            width: 200px;
            height: 200px;
            background-color: blue;
        } */
    </style>
</head>

<body>
    <!-- <div class="xxm">嘻嘻喵</div> -->
    <div class="content">
        <!-- <div class="LLL ">我不难过</div> -->
    </div>
    <div class="backtop">
        <img src="./images/close2.png" alt="">
        <a href="javascript:;"></a>
    </div>
    <script>
        let back = document.querySelector('.backtop')
        window.addEventListener('scroll',function(){
            let n = document.documentElement.scrollTop
            console.log(n)
            if(n > 500){
                back.style.display = 'block'
            }else{
                back.style.display = 'none'
            }
        })
      back.addEventListener('click',function(){
        document.documentElement.scrollTop = 0
      })
    </script>
</body>

</html>